<template>
  <div class="page-bg">
    <el-divider></el-divider>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">项目名称</label>
      </div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{name}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="startTime">
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="endTime">
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">项目负责人</label>
      </div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{managerName}}
        </div>
      </div>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">主要内容</label>
      </div>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入项目主要内容"
        v-model="content"
        clearable>
      </el-input>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">考核指标</label>
      </div>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入项目考核指标"
        v-model="target"
        clearable>
      </el-input>
    </div>
    <el-divider></el-divider>
    <div class="row">
      <svg class="icon addTaskIcon" aria-hidden="true" @click="handleAddTask">
        <use xlink:href="#iconicon_add"></use>
      </svg>
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconmokuai1"></use>
          </svg>
          课题安排
        </span>
    </div>
    <el-divider></el-divider>
    <div v-for="item of taskList" :key="item.id" >
      <div class="row">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
           <span class="delIcon" @click="handleDelete(item.id, item.name)">
            <svg class="icon delIconSize" aria-hidden="true">
              <use xlink:href="#iconpicture-delet"></use>
            </svg>
           </span>
        <span class="delIcon" @click="handleEdit(item.id)">
            <svg class="icon delIconSize" aria-hidden="true">
              <use xlink:href="#iconbianji1"></use>
            </svg>
          </span>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="weui-btn-area">
      <a href="javascript:;" class="weui-btn weui-btn_primary" @click="edit=true">提交修改</a>
    </div>
    <el-dialog title="修改课题" :visible.sync="editTask" width="90%">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">课题名称</label></div>
        <div class="weui-cell__bd ">
          <input class="weui-input" pattern="[0-9]*" placeholder="请输入课题名称" type="name" v-model="editTaskForm.name">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">开始时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="editTaskForm.startTime">
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">结束时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="editTaskForm.endTime">
          </div>
        </div>
      </div>
      <div class="weui_cell weui_cell_select">
        <div class="weui_cell_bd weui_cell_primary">
          <select class="weui_select" v-model="editTaskForm.leaderID">
            <option value=-1>请选择课题负责人</option>
            <option v-for="data in teacherList"
                    :key="data.id"
                    :value="data.id"
                    :label="data.name"></option>
          </select>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">课题状态</label>
        </div>
        <div class="weui-cell__bd ">
          <el-select v-model="editTaskForm.state" placeholder="请选择课题当前状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">课题主要内容</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入课题主要内容"
          v-model="editTaskForm.content"
          clearable>
        </el-input>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">课题考核指标</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入课题考核指标"
          v-model="editTaskForm.target"
          clearable>
        </el-input>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editTask = false">取 消</el-button>
        <el-button type="primary" @click="updateTask()">提交修改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新建课题" :visible.sync="addTask" width="90%">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">课题名称</label></div>
        <div class="weui-cell__bd ">
          <input class="weui-input" pattern="[0-9]*" placeholder="请输入课题名称" type="name" v-model="task.name">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">开始时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="task.startTime">
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">结束时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="task.endTime">
          </div>
        </div>
      </div>
      <div class="weui_cell weui_cell_select">
        <div class="weui_cell_bd weui_cell_primary">
          <select class="weui_select" v-model="task.leaderID">
            <option value=-1>请选择课题负责人</option>
            <option v-for="data in teacherList"
                    :key="data.id"
                    :value="data.id"
                    :label="data.name"></option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">课题主要内容</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入课题主要内容"
          v-model="task.content"
          clearable>
        </el-input>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">课题考核指标</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入课题考核指标"
          v-model="task.target"
          clearable>
        </el-input>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTask = false">取 消</el-button>
        <el-button type="primary" @click="submitTask()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="edit"
      width="70%">
      <span>确定提交《{{name}}》的修改吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="edit = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="deleteTask"
      width="70%">
      <span>确定删除《{{taskName}}》吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteTask = false">取 消</el-button>
        <el-button type="primary" @click="delTask">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'projectEditForm',
  data () {
    return {
      options: [{
        value: 1,
        label: '课题等待审核'
      }, {
        value: 2,
        label: '项目等待审核'
      }, {
        value: 3,
        label: '运行中'
      }, {
        value: 4,
        label: '已完成'
      }],
      project: '',
      edit: false,
      addTask: false,
      deleteTask: false,
      editTask: false,
      taskID: '',
      taskName: '',
      name: '',
      startTime: '',
      endTime: '',
      content: '',
      target: '',
      managerName: '',
      teacherList: [],
      editTaskForm: {
        name: '',
        projectID: parseInt(sessionStorage.getItem('pid')),
        startTime: '',
        endTime: '',
        leaderID: '',
        content: '',
        target: '',
        state: ''
      },
      task: {
        name: '',
        projectID: parseInt(sessionStorage.getItem('pid')),
        startTime: '',
        endTime: '',
        leaderID: '',
        content: '',
        target: ''
      },
      taskList: []
    }
  },
  methods: {
    // getPIList () {
    //   axios.get(this.url + '/user/level/' + this.PI)
    //     .then(this.getTeacherListSucc)
    // },
    getPRList () {
      axios.get(this.url + '/user/level/' + this.PR)
        .then(this.getTeacherListSucc)
    },
    getTeacherListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.teacherList = res
      } else {
        alert('获取老师列表失败，请稍后再试！')
      }
    },
    delTask () {
      this.$axios({
        method: 'delete',
        url: this.url + '/module/id/' + this.taskID
      }).then((res) => {
        if (res.status === 200) {
          alert('删除成功！')
          axios.get(this.url + '/module/project' + sessionStorage.getItem('pid'))
            .then(this.getTaskListSucc)
          this.deleteTask = false
          this.getTaskList()
        }
      }).catch((err) => {
        alert(err)
      })
    },
    handleEdit (taskID) {
      this.editTask = true
      this.getPRList()
      axios.get(this.url + '/module/id/' + taskID)
        .then(this.getTaskSucc)
    },
    getTaskSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.editTaskForm = res
        // this.editTaskForm.name = res.name
        // this.editTaskForm.startTime = res.startTime
        // this.editTaskForm.endTime = res.endTime
        // this.editTaskForm.content = res.content
        // this.editTaskForm.target = res.target
        // this.editTaskForm.leaderName = res.leaderName
        // this.editTaskForm.leaderID = res.leaderID
        // if (res.state === this.TaskWaitForCheck) this.editTaskForm.stateText = '课题等待审核'
        // else if (res.state === this.ProjectWaitForCheck) this.editTaskForm.stateText = '项目等待审核'
        // else if (res.state === this.Run) this.editTaskForm.stateText = '运行中'
        // else if (res.state === this.Finished) this.editTaskForm.stateText = '已完成'
        this.editTaskForm.state = res.state
        this.editTask = true
      } else alert(res.data)
    },
    handleDelete (taskID, taskName) {
      this.deleteTask = true
      this.taskName = taskName
      this.taskID = taskID
    },
    handleAddTask () {
      // this.getPIList()
      this.getPRList()
      this.task.name = ''
      this.task.startTime = ''
      this.task.endTime = ''
      this.task.content = ''
      this.task.target = ''
      this.task.leaderID = -1
      this.addTask = true
    },
    getProject () {
      axios.get(this.url + '/project/id/' + sessionStorage.getItem('pid'))
        .then(this.getProjectSucc)
    },
    getProjectSucc (res) {
      res = res.data
      if (res) {
        this.project = res
        this.name = res.name
        this.startTime = res.startTime
        this.endTime = res.endTime
        this.content = res.content
        this.target = res.target
        this.managerName = res.managerName
      }
    },
    getTaskList () {
      axios.get(this.url + '/module/project/' + sessionStorage.getItem('pid'))
        .then(this.getTaskListSucc)
    },
    getTaskListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.taskList = res
      } else alert(res.date)
    },
    updateTask () {
      if (this.editTaskForm.leaderID === -1) {
        this.$notify.warning({
          title: '请选择课题负责人！'
        })
        return
      }
      if (this.editTaskForm.name === '') {
        this.$notify.warning({
          title: '请输入课题名称！'
        })
        return
      }
      this.$axios({
        method: 'put',
        url: this.url + '/module/',
        data: this.editTaskForm
      }).then((res) => {
        if (res.status === 200) {
          // res = res.data
          alert('提交成功！')
        } else alert(res.data)
      }).catch((err) => {
        alert(err)
      })
      this.editTask = false
    },
    submitTask () {
      if (this.task.leaderID === -1) {
        this.$notify.warning({
          title: '请选择课题负责人！'
        })
        return
      }
      if (this.task.name === '') {
        this.$notify.warning({
          title: '请输入课题名称！'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: this.url + '/module/',
        data: this.task
      }).then((res) => {
        if (res.status === 200) {
          res = res.data
          alert('提交成功！')
          this.taskList.push({
            name: this.task.name,
            id: res.id
          })
        } else alert(res.data)
      }).catch((err) => {
        alert(err)
      })
      this.addTask = false
    },
    submit () {
      this.$axios({
        method: 'put',
        url: this.url + '/project/',
        data: {
          id: parseInt(sessionStorage.getItem('pid')),
          // state: this.ProjectWaitForCheck,
          managerID: this.project.managerID,
          name: this.name,
          startTime: this.startTime,
          endTime: this.endTime,
          content: this.content,
          target: this.target
        }
      }).then((res) => {
        if (res.status === 200) alert('提交成功！')
        else alert(res.data)
        this.$router.push('/project')
      }).catch((err) => {
        alert(err)
      })
      this.edit = false
    }
  },
  mounted () {
    this.getProject()
    this.getTaskList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .3rem
    color #16b0ff
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
  .addTaskIcon
    float: right
    font-size 19.9px
    margin-right .9rem
    margin-top .18rem
    color black
  .delIconSize
    font-size 25px
</style>
